<template>
   
  <el-card shadow="hover" class="box-card" >
    <template #header>
      <div class="card-header content">
        <span @click="goToDetail" style="text-decoration: underline;">{{apiData.name}}</span>
        <!-- <el-button class="button" text>Operation button</el-button> -->
      </div>
    </template>
    <div class="content">链接地址：{{apiData.apiUrl}}</div>
    <div class="content">作者：{{apiData.author}}</div>
  </el-card>
  
</template>
<script>

export default{
  props:["apiData"],
  data(){
    return {
        data:{
          path: "",
        }
    
    }
  },
  methods:{
    goToDetail(){
      this.$router.push({ path: `/detail/${this.apiData.name}`}); //不能这样子，会去匹配完整路径的路由，不能把数据当作路由信息的一部分去传
    },
    
  }
}
</script>
<style>
 .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
} 

 .text {
  font-size: 7px;
}

.item {
  margin-bottom: 9px;
}

.box-card {
  width: 240px;
} 
.content {
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
  font-size: 15px;
}
</style>
